<template>
  <div class="chat-page" :class="!$store.state.commonData.isShowChatConversation ? 'chat-content-chat' : 'chat-content-conversation'">
    <van-pull-refresh v-if="!isShowChatConversation" v-model="loading" @refresh="onRefresh" loading-text="Loading..." pulling-text="Pull down to refresh..." loosing-text="Release to refresh...">
      <el-scrollbar class="chat-list-items">
        <el-empty v-if="chatStore.chats.length === 0" description="No chat messages"></el-empty>
        <div v-else>
          <div v-for="(chat, index) in chatStore.chats" :key="index" class="chat-item-container">
            <van-swipe-cell style="width: 100vw">
              <chat-item v-show="!chat.delete && chat.showName.includes($store.state.commonData.chatsSearchText)" :chat="chat" :index="index"
                         @click.native="onActiveItem(chat, index)" @delete="onDelItem(index)" @top="onTop(index)" ref="chatItemRef"
                         :active="chat === chatStore.activeChat"></chat-item>
              <template #right>
                <van-button style="height: 100%" square type="primary" text="TOP" @click="onTop(index)" />
                <van-button style="height: 100%" square type="danger" text="DELETE" @click="onDelItem(index)" />
              </template>
            </van-swipe-cell>
          </div>
        </div>
      </el-scrollbar>
    </van-pull-refresh>
    <!--    <el-container class="chat-box">-->
    <!--      <chat-box v-if="chatStore.activeChat" :chat="chatStore.activeChat"></chat-box>-->
    <!--    </el-container>-->
<!--    <chat-conversation v-if="isShowChatConversation"></chat-conversation>-->
  </div>
</template>

<script>
import ChatItem from "../components/chat/ChatItem.vue";
import ChatBox from "../components/chat/ChatBox.vue";
import {Dialog} from "vant";
import ChatConversation from "@/view/ChatConversation.vue";

export default {
  name: "chat",
  components: {
    ChatConversation,
    ChatItem,
    ChatBox
  },
  data() {
    return {
      searchText: "",
      messageContent: "",
      group: {},
      groupMembers: []
    }
  },
  methods: {
    onRefresh() {
      // this.$emit('refresh')
      window.location.reload();
    },
    onActiveItem(chat, index) {
      console.log('current user chat', chat, index)
      this.$store.commit("activeChat", index);
      this.$nextTick(() => {
        console.log('active chat', this.$store.state.activeChat)
        console.log('JSON.stringify(active chat)', JSON.stringify(this.$store.state.activeChat))
      })
      // this.$store.commit('commonData/setCurChatConversation', chat)
      // this.$router.push('/chat-conversation')
      this.$store.commit('commonData/setIsShowChatConversation', true)
    },
    onDelItem(index) {
      this.$store.commit("removeChat", index);
    },
    onTop(chatIdx) {
      this.$store.commit("moveTop", chatIdx);
    },
    refreshChats() {
      // Refresh chats if necessary
      this.$store.commit('refreshChats');
    }
  },
  computed: {
    isShowChatConversation: {
      get() {
        return this.$store.state.commonData.isShowChatConversation
      },
      set(value) {
        this.$store.commit("commonData/isShowChatConversation", value)
      }
    },
    chatStore() {
      return this.$store.state.chatStore;
    },
    loading() {
      return this.chatStore.loadingGroupMsg || this.chatStore.loadingPrivateMsg
    }
  },
  updated() {
    this.refreshChats()
  },
  mounted() {
    console.log('-----------------chatStore.chats111', this.$store.state.chatStore)
    // this.$eventBus.$emit("openPrivateVideo",  {"mode":"voice","isHost":true,"friend":{"id":40,"userName":"zhangr","nickName":"zhangr","sex":1,"type":1,"signature":"my signature","headImage":"/getF/2d43e63ca240bdf793814be0dbc9c3a5_b2d9fc849b164b74ba1b4e7710ccfdc3.jpg","headImageThumb":"/getF/thumb/2d43e63ca240bdf793814be0dbc9c3a5_b2d9fc849b164b74ba1b4e7710ccfdc3.jpg","online":false}});
    this.refreshChats()
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // Refresh data every time you enter the current route
      vm.refreshChats();
    });
  },
  beforeRouteUpdate(to, from, next) {
    // Refresh data every time the route is updated
    this.refreshChats();
    next();
  }
}
</script>

<style lang="scss">
.chat-content-chat {
  height: calc(100vh - 210px);
}

.chat-content-conversation {
  height: 100vh;
}

.chat-page {
  //height: calc(100vh - 210px); // 210+22+22

  .van-pull-refresh, .chat-list-items, .el-scrollbar__view {
    height: 100%;
  }
  .el-empty {
    padding: 0 !important;
    height: 100%;
    transform: translate(0, -5%);
  }
  .chat-list-items {
    flex: 1;
  }
  // ---------- current no use
  .chat-list-box {
    display: flex;
    flex-direction: column;
    background: var(--im-background);

    .chat-list-header {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 8px;
    }

    .chat-list-loading {
      height: 50px;
      background-color: #eee;

      .el-icon-loading {
        font-size: 24px;
        color: var(--im-text-color-light);
      }

      .el-loading-text {
        color: var(--im-text-color-light);
      }

      .chat-loading-box {
        height: 100%;
      }
    }
  }
}
</style>
